<template>
    <page-header-wrapper>
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <s-table :loading="loading" :cols="cols" :data="data" :actions="acts"
                         :operators="[{type: 'primary', icon: 'plus', title: '新建', selection: false, func: add}]"/>
                <r-form :title="modal.title" :visible="modal.visible" :loading="modal.loading"
                        :fields="modal.fields" :model="modal.model" @ok="addOk"
                        @cancel="modal.visible = modal.loading = false"/>
            </div>
        </a-card>
    </page-header-wrapper>
</template>

<script>
    import STable from '@/components/Table/PagerTable'
    import RForm from '@/components/Forms/RecordForm'
    import API from "@/api"
    import {Modal} from "ant-design-vue"

    export default {
        components: {
            STable,
            RForm
        },
        data() {
            return {
                loading: true,
                data: [],
                cols: [{title: '岗位', key: 'name', search: true}],
                acts: [{func: this.edit, title: '编辑'}, {func: this.del, title: '删除'}],

                modal: {
                    title: '',
                    visible: false,
                    loading: false,
                    fields: [{title: '岗位', key: 'name', rules: [
                        { required: true, message: '请输入岗位名称', trigger: 'blur' },
                            { max: 16, message: '岗位名称过长', trigger: 'blur' }]}],
                    model: {}
                }

            }
        },
        mounted() {
            API.Position.List().then((res) => {
                if (res) {
                    this.data = res.data
                    this.data.forEach(item => item.key = item.id.toString())
                }
            }).finally(() => this.loading = false)
        },
        methods: {
            add() {
                this.modal.title = '添加岗位'
                this.modal.model = null
                this.modal.visible = true
            },
            edit(record) {
                this.modal.title = '编辑岗位'
                this.modal.model = record
                this.modal.visible = true
            },
            del(record) {
                Modal.confirm({
                    title: '提示',
                    content: '是否确认该岗位？',
                    onOk: () => {
                        API.Position.Del({id: record.id}).then((res) => {
                            if (res) {
                                this.$notification.success({message: '提示', description: '岗位已删除'})
                                this.data = this.data.filter(item => item.id !== record.id)
                            }
                        })
                    },
                    onCancel () {}
                })
            },
            addOk(params) {
                this.modal.loading = true
                if (params.id) {
                    API.Position.Edit(params).then((data) => this.addProcessor(data, params))
                        .finally(() => this.modal.loading = false)
                }
                else {
                    API.Position.Add(params).then((data) => this.addProcessor(data, params))
                        .finally(() => this.modal.loading = false)
                }
            },
            addProcessor(res, params) {
                if (res) {
                    this.modal.visible = false
                    if (params.id) {
                        for (let i = 0; i < this.data.length; i++) {
                            let item = this.data[i]
                            if (item.id === params.id) {
                                item.name = params.name
                                break
                            }
                        }
                        this.$notification.success({message: '提示', description: '岗位修改成功'})
                    }
                    else {
                        params.id = res.data
                        params.key = params.id.toString();
                        this.data.push(params)
                        this.$notification.success({message: '提示', description: '添加岗位成功'})
                    }
                }
            }
        }
    }
</script>
